<template>
	<view>
		<!-- 用户资料详情页 -->
		<view class="userInfo">
			<view class="user flex flexBeb">
				<image :src="this.userinfo.hesdPortrait" ></image>
				<view class="info">
					<view class="name textHd">
						{{this.userinfo.name}}
					</view>
					<view class="motto textHd">
						{{this.userinfo.userMotto}}
					</view>
				</view>
				<view class="btn flex flexCen">
					<button @click="setFollow">{{isfollow?'已关注': '关注'}}</button>
				</view>
				</view>
				<view class="tabInfo flex">
					<view class="tabItem" >
						<text>{{this.count.postCount}}</text>
						<view >游记</view>
					</view>
					<view class="tabItem">
						<text>{{this.count.myFollowCount}}</text>
						<view >关注</view>
					</view>
					<view class="tabItem">
						<text>{{this.count.followMeCount}}</text>
						<view >粉丝</view>
					</view>
				</view>
		</view>
		<!-- 游记部分 -->
		<view class="travel">
				<titleglobal :title="'游记列表'"></titleglobal>
			  <view class="travelList" >
			  	<view class="travelItem" v-for="(item, index) in travelList" :key="index" @click.prevent="navtoTravelDetails(item.post_id)">
			  		<view class="header flex ">
			  			<text class="time">发布时间:{{item.create_time.slice(0, 16)}} </text>
			  		</view>
			  		<view class="content flex flexBei">
			  			<image :src="item.picture" ></image>
			  			<view class="details textHd4">
			  				{{item.post_content}}
			  			</view>
			  		</view>
			  		<view class="bottom flex">
			  			<view class="icon">
			  				{{item.category}}
			  			</view>
			  			<view class="icon">
			  				<view class="iconfont icon-zan inview"></view>
			  				<text>{{item.likes > 999? '999+' : item.likes}}</text>
			  		   </view>
			  		</view>
			  	</view>
			  </view>
			</view>
			<!-- 内容为空 -->
			<u-empty mode="list" text="暂无游记" margin-top="140" v-show="(this.travelList.length == 0)"></u-empty>
			<!-- 语句提示 -->
			<u-toast ref="uToast"></u-toast>
		</view>
	</view>
</template>

<script>
	import titleglobal from '../../components/title.vue'
	
	import { getuserinfo } from '../../api/user.js'
	import { gettravel } from '../../api/travel.js'
	import { isattention, addfollow, deletefollow  } from '../../api/follow_like.js'
	export default {
		data() {
			return {
			  userinfo: {},
			  count: {},
			  total: '',
			  isfollow: false,
			  params: {
				userId: '',
				pageNum: 1,
				pageSize: 4
			  },
			  travelList: []
			}
		},
		components: {
			 titleglobal,
		},
		onReachBottom() {
			if (this.total >= (this.params.pageNum *this.params.pageSize)) {
				 this.getMore()
			} else {
				this.$refs.uToast.show({
					position: 'top',
					title: '没有更多数据了'
				})
			}
		},
		onLoad(e) {
		  this.params.userId = e.id
		  uni.setNavigationBarTitle({
		  	title: '用户详情'
		  })
		},
		mounted() {
		  this.getUserInfo()
		},
		methods: {
		  // 获取用户资料详情
		  async getUserInfo () {
			 const res = await getuserinfo({userId: this.params.userId})
			 const { data, ...count} = res.data.data
			 this.userinfo = data || {}
			 this.count = count
			 this.isAttention()
			  this.getTravel()
		  },
		  // 获取游记列表
		  async getTravel () {
			 const res = await gettravel(this.params)
			 this.travelList = res.data.data.data
			 this.total = res.data.data.total
		  },
		  // 是否已经关注
		  async isAttention () {
			  const params = {
				  followId: this.params.userId,
				  mineId: this.$store.state.userinfo.userId
			  }
			 const res = await isattention(params)
			 this.isfollow = res.data.data.isFollow
		  },
		  // 关注或取消关注某个用户
		  async setFollow () {
		  	const params = {
		  		followId: this.params.userId ,
		  		mineId: this.$store.state.userinfo.userId
		  	};
		  	if (this.isfollow) { // 取消关注
		  		await deletefollow(params)
		  	} else { // 关注
		  		await addfollow(params)
		  	}
		  	this.getUserInfo()
			this.$store.dispatch('getUserInfo')
		  },
		  // 跳转到游记详情页面
		  navtoTravelDetails (id) {
			  uni.navigateTo({
			  url: `../travel_details/travel_details?id=${id}`
			  })
		  },
		  // 获取更多游记
		  async getMore () {
			  this.params.pageNum ++;
			  const res = await gettravel(this.params)
			  this.travelList = [...this.travelList, ...res.data.data.data]
		  }
		}
	}
</script>

<style lang="less" scoped>
	/* 用户 */
	.userInfo {
		background-color: #fff;
		padding: 18rpx 24rpx;
		.user {
			justify-content: space-around;
			image {
				width: 80rpx;
				height: 80rpx;
				border-radius: 12rpx;
			}
			.info {
				width: 460rpx;
			}
			.btn {
				width: 140rpx;
				button {
					font-size: 24rpx;
					border-radius: 12rpx;
				}
				
			}
		}
		.tabInfo {
			padding: 32rpx 12rpx;
			justify-content: space-around;
			text-align: center;
		}
	}
/* 游记部分 */
.travel {
	padding: 0 16rpx;
	background-color: #fff;
	margin-top: 30rpx;
}
</style>
